<div class="row">
  <div class="col-md-8">
    <p>
      <label>Pagination:
        <input type="checkbox" [checked]="pagination" (change)="pagination = !pagination" >
        <label>Page #:
          <input type="text" [(ngModel)]="page" size="2">
        </label>
        <label>Page Size:
          <input type="text" [(ngModel)]="size" size="2">
        </label>
      </label>
      <button (click)="requestQuoteStream()">Reactive Request</button>
      <button (click)="requestQuoteBlocking()">Blocking Request</button>
    </p>
    <table class="table">
      <thead>
      <tr>
        <th>Quote ID</th>
        <th>Book</th>
        <th>Quote content</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let quote of quoteArray" [class.success]="quote === selectedQuote" (click)="onSelect(quote)">
        <td>{{quote.id}}</td>
        <td>{{quote.book}}</td>
        <td>{{quote.content.substr(0, 30)}}...</td>
      <tr>
      </tbody>
    </table>
  </div>
  <div class="col-md-4">
    <div class="message">Click on a quote for more details</div>
    <app-quote-detail [quote]="selectedQuote"></app-quote-detail>
  </div>
</div>
